<template>
  <div class="header">
    <van-nav-bar title="归档" />
  </div>
  <div class="body">
    <!-- 主体内容 -->
    <section class="archive">
      <div class="archive-container">
        <div class="archive-post">
          <h3 class="archive-total">归档: {{ articleCount }} 篇</h3>

          <!-- 树形图 -->
          <div v-for="(item, index) in dataList" :key="index">
            <h3 class="archive-year">{{ item.year }}</h3>
            <div class="archive-item" v-for="(value, key) in item.list" :key="key">
              <a class="archive-date" @click="jumpArticleDetail(value.id)">{{
                value.month
              }}</a>
              <a class="archive-title" @click="jumpArticleDetail(value.id)">{{
                value.arttitle
              }}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- navbar -->
  <div class="footer">
    <Menu @getPlaceFileData="goPlaceFile" ref="MenuRef" activeDefine="2" />
  </div>
</template>

<script lang="ts" setup>
// 引入子组件
import Menu from "/@/components/phone/Menu.vue";
import { ref, onMounted, nextTick } from "vue";
import {
  // 这里是方法
  jumpArticleDetail,
  goPlaceFile,
  Mounted,
  // 这里是变量
} from "/@/assets/js/phone/placeFile";

// =====================================================
// 调用生命周期函数
const { MenuRef, dataList, active, articleCount } = Mounted();
// import {
//   PropType,
//   ref,
//   watch,
//   reactive,
//   toRefs,
//   provide,
//   inject,
//   onBeforeMount, // 在组件挂载之前执行的函数
//   onMounted,
//   onBeforeUpdate, // 在组件修改之前执行的函数
//   onUpdated,
//   onBeforeUnmount, // 在组件卸载之前执行的函数
//   onUnmounted,
//   nextTick,
// } from "vue";
// // 引入路由
// import { useRouter, useRoute } from "vue-router";
// // 引入公共js文件
// import utils from "/@/assets/js/public/function";
// // 引入子组件
// import Menu from "/@/components/phone/Menu.vue";

// // =============================================================================
// // 实例化路由
// const router = useRouter();
// const route = useRoute();

// /**
//  * @name: 声明data
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-01-18
//  */
// const data = reactive({
//   // 文章列表
//   dataList: Array<any>(),
//   // 文章数量
//   articleCount: <Number>0,
// });

// /**
//  * @name: 将data绑定值dataRef
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-01-10
//  */
// const { dataList, articleCount } = toRefs(data);

// // ===============================================================================
// // 子组件相关
// /**
//  * @name: 定义子组件暴露给父组件的值属性列表
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// interface menuData {
//   goIndex: () => void;
//   getIndexDataList: () => void;
//   goOther: () => void;
//   homeColor: string;
//   otherColor: string;
//   placeFileColor: string;
//   personalColor: string;
// }
// // 子组件ref（TypeScript语法）下面这这两种写法也可以，推荐使用Typescript语法
// const MenuRef = ref<InstanceType<typeof Menu> & menuData>();
// // const MenuRef = ref<InstanceType<typeof Menu>>()
// // const MenuRef = ref(null)

// // ===============================================================================
// // 方法
// /**
//  * @name: 跳转文章详情页
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  * @param:	category_id	number	分类
//  */
// const jumpArticleDetail = (article_id: Number) => {
//   router.push({
//     path: "/phone/articleDetail",
//     query: {
//       article_id: utils.encryptCode({ article_id: article_id }),
//       path: "placeFile",
//     },
//   });
// };
// /**
//  * @name: 子组件向父组件抛出的方法
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const goPlaceFile = (response: any): void => {
//   try {
//     // 数组赋值
//     data.dataList = response.dataList;
//     data.articleCount = response.articleCount;
//   } catch (error) {
//     console.log("出错了");
//   }
// };

// /**
//  * @name: 生命周期---页面挂载完成
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const mounted = onMounted(() => {
//   // console.log('获取子组件中的性别', MenuRef );
//   // console.log('获取子组件中的性别', MenuRef.value );
//   // console.log('获取子组件中的性别', MenuRef.value.sex );
//   // console.log('获取子组件中的其他信息', MenuRef.value.info );
//   // console.log('获取子组件中的其他信息', MenuRef.value.homeColor );
//   // 执行子组件方法
//   MenuRef.value?.getPlaceFileData();
// });
</script>

<style scoped lang="scss">
@import "/@/assets/css/phone/gossip.scss";
</style>
